<!-- 黑名单列表 -->
<template>
    <div>
        <!-- 搜索区域 -->
        <el-form :inline="true" :model="formData" class="demo-form-inline">
            <el-form-item label="时间范围">
                <el-date-picker v-model="dateSelect" type="daterange" range-separator="至" start-placeholder="开始时间"
                    end-placeholder="结束时间" value-format="YYYY-MM-DD" @change="dateChange" />
            </el-form-item>
            <el-form-item label="oaid">
                <el-input clearable v-model="formData.oaid" />
            </el-form-item>
            <el-form-item label="链接名称">
                <el-input clearable v-model="formData.link_type" />
            </el-form-item>
            <!-- <el-form-item label="页面名称">
                <el-input clearable v-model="formData.pageName" />
            </el-form-item> -->
            <!-- <el-form-item label="包名">
                <el-input clearable v-model="formData.package" />
            </el-form-item> -->
            <!-- <el-form-item label="是否去重">
                <el-select v-model="formData.buttonQc" clearable @clear="clearButtonQc">
                    <el-option label="去重" value="1" />
                    <el-option label="不去重" value="0" />
                </el-select>
            </el-form-item> -->
            <el-form-item>
                <el-button type="primary" icon="Search" @click="searchHandler">查询</el-button>
            </el-form-item>
        </el-form>

        <!-- 表格区域 -->
         <!-- https://bkimg.cdn.bcebos.com/pic/c2fdfc039245d688d43f9f4639886a1ed21b0ff48eb5 -->
        <el-table :data="tableData">
            <el-table-column type="index" label="#" width="50"/>
            <el-table-column prop="link_type" label="链接名称" width="90" align="center"/>
            <!-- <el-table-column prop="page" label="页面名称" width="120" align="center"/> -->
            <!-- <el-table-column prop="package" label="包名" width="100" align="center"/> -->
            <!-- <el-table-column prop="oaid" label="oaid" width="450" align="center">
                <template #default="scope">
                    <el-tooltip class="item" effect="dark" :content="scope.row.oaid" placement="top">
                        <span v-if="scope.row.oaid" @click="copyOaid(scope.row.oaid)">{{ scope.row.oaid.slice(0, 40) }}...</span>
                        <span v-else></span>
                    </el-tooltip>
                </template>
            </el-table-column> -->
            <el-table-column prop="oaid" label="oaid" width="600" align="center">
                <template #default="scope">
                    <span v-if="scope.row.oaid" @click="copyOaid(scope.row.oaid)">{{ scope.row.oaid }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="black_type" label="屏蔽类型" width="100" align="center">
                <template #default="scope">
                    <el-tag effect="dark" v-if="scope.row.black_type == 1">包名</el-tag>
                    <el-tag type="info" v-else effect="dark">其他</el-tag>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="re_time" label="发送时间" align="center" width="170"/> -->
            <el-table-column prop="fir_add_time" label="时间" align="center" width="170"/>
        </el-table>

        <br/>
        <!-- 分页器 -->
        <el-pagination
          v-model:currentPage="pageNo"
          v-model:page-size="limit"
          @current-change="getTableData"
          @size-change="sizeChange"
          :page-sizes="[10, 20, 30]"
          background 
          layout="prev, pager, next, jumper, ->, sizes, total"
          :total="total" />
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { ref, onMounted } from 'vue'
import { pagecountlist, blacklist } from "@/api/page/list1"

// 分页器当前页码
let pageNo = ref(1)
// 每一页展示多少条数据
let limit = ref(10)
// 数据总条数
let total = ref(0)
// 分页的下拉菜单发生改变时触发
const sizeChange = () => {
    pageNo.value = 1
    getTableData()
}

// 时间范围
const dateSelect = ref('') 
const dateChange = (val) => {
    dateSelect.value = val
    if (val && Array.isArray(val)) {
      formData.value.dataStart = val[0]
      formData.value.dataEnd = val[1]
    } else {
      formData.value.dataStart = ''
      formData.value.dataEnd = ''
    }
  }

// 表单数据收集
const formData = ref({
    page: 1,
    pages: 10,
    dataStart: '',
    dataEnd: '',
    oaid: '',
    // pageName: '',
    link_type: '',
    // buttonQc: ''
})

// 获取表格数据
const tableData = ref([])
const getTableData = async () => { 
    let res = await blacklist(Object.assign(formData.value, {
        page: pageNo.value, // 页号
        pages: limit.value // 每页数量
    }))
    tableData.value = res.data
    total.value = res.total
    console.log('黑名单------统计', res)
}

// 点击搜索按钮
  const searchHandler = () => {
    pageNo.value = 1
    getTableData()
  }

// 清空去重条件时触发
const clearButtonQc = () => {
    formData.value.buttonQc = ''
}

// 复制oaid
const copyOaid = (oaid) => {
    let input = document.createElement('textarea')
    input.value = oaid
    document.body.appendChild(input)
    input.select()
    document.execCommand('copy')
    document.body.removeChild(input)
    ElMessage({
        message: '复制成功',
        type: 'success',
        plain: true
  })
}

onMounted(() => {
    getTableData()
})
</script>

<style scoped lang="scss">
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>